<!--created by Chuanpeng.zhu@dhc.com.cn-->
<ion-view view-title="主题设置">
  <ion-content>
    <div class="padding">

      <h3>说明</h3>

      <p>我们的APP同行都会有一个主题颜色。Ionic给我们提供了若干种预置颜色。
        打开scss/ionic.app.scss文件，你就会看到所有预置的颜色主题：</p>
      <ul>
        <li> $light: #fff !default;</li>
        <li> $stable: #f8f8f8 !default;</li>
        <li> $positive: #387ef5 !default;</li>
        <li> $calm: #11c1f3 !default;</li>
        <li> $balanced: #33cd5f !default;</li>
        <li> $energized: #ffc900 !default;</li>
        <li> $assertive: #ef473a !default;</li>
        <li> $royal: #886aea !default;</li>
        <li> $dark: #444 !default;</li>
      </ul>
      <p>
        我们搜索所有scss文件中$assertive的引用，会发现，Ionic定义了tab页，button等主题相关的效果样式。
      </p>
      <img ng-src="./img/Theme_useage.jpg" class="width-100"/>

      <p>我们可以覆盖系统默认颜色，达到自定义的效果。例如本APP选用红色。我们在$assertive的基础上修改。</p>

      <p>还是scss/ionic.app.scss文件，我们添加代码：</p>

      <p> $assertive: #b60b10 !default;</p>
      <p>然后在index.html中修改</p>
      <img ng-src="./img/Theme_index.jpeg" class="width-100"/>
      <p>即可看到主题的颜色跟改为自定义的assertive主题。</p>
    </div>
  </ion-content>
</ion-view>
